<template>
<div class="leo-window-frame">
    <div class="leo-window-frame-workspace">
        <left-area @mouseDownAction="mouseDownAction" @mouseUpAction="mouseUpAction">
            
        </left-area>
        <div class="leo-window-frame-center"></div>
    </div>
</div>
</template>

<script lang="ts">
import {
    Options,
    Vue
} from 'vue-class-component';

import leftArea from './left-area.vue';
import {
    RefElement
} from 'element-plus/lib/el-popper/src/use-popper';

@Options({
    components: {
        leftArea
    }
})
export default class extends Vue {

    created() {
    }

    mounted() {
    }


    /**
     * 鼠标按下事件
     */
    mouseDownAction(event: MouseEvent) {
  
    }

    /**
     * 鼠标抬起事件
     */
    mouseUpAction(event: MouseEvent) {
        
    }

   

}
</script>

<style lang="scss" scoped>
.leo-window-frame {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;

    .leo-window-frame-bar {
        position: relative;
    }

    .leo-window-frame-workspace {
        box-sizing: border-box;
        display: flex;
        display: -webkit-flex;
        width: 100%;
        position: absolute;
        flex-flow: row;

        .leo-window-frame-center {
            flex: 1;
            width: 0;
            background: #f1f2f7;

            .leo-window-frame-center-iframe {
                display: block;
                width: 100%;
                height: 100%;
                border: none;
            }
        }
    }

}
</style>
